<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-image"
		:class="_classes"
		:style="_styles"
		:hover-class="$attrs.hoverClass || $attrs['hover-class']"
	>
		<!-- 图片 -->
		<image
			class="pure-image__image"
			:src="src"
			:mode="$attrs.mode"
			:lazy-load="$attrs.lazyLoad || $attrs['lazy-load']"
			:fade-show="$attrs.fadeShow || $attrs['fade-show']"
			:webp="$attrs.webp"
			:show-menu-by-longpress="
				$attrs.showMenuByLongpress || $attrs['show-menu-by-longpress']
			"
			:draggable="$attrs.draggable"
			@load="_onLoad"
			@error="_onError"
			@tap="_handleTap"
		/>

		<!-- 占位图 -->
		<image
			class="pure-image__placeholder"
			:src="placeholderSrc"
			:mode="$attrs.mode"
			:lazy-load="$attrs.lazyLoad || $attrs['lazy-load']"
			:fade-show="$attrs.fadeShow || $attrs['fade-show']"
			:webp="$attrs.webp"
			:show-menu-by-longpress="
				$attrs.showMenuByLongpress || $attrs['show-menu-by-longpress']
			"
			:draggable="$attrs.draggable"
			v-if="_status === 'loading' && placeholderSrc"
		/>

		<!-- 加载中 -->
		<view
			class="pure-image__status pure-image__status--loading"
			v-else-if="_status === 'loading'"
		>
			<slot name="loading">
				<view
					class="pure-image__status__icon pure-image__status__icon--loading"
				>
					<pure-icon
						:name="loadingIconName"
						:mode="
							$attrs.loadingIconMode ||
							$attrs['loading-icon-mode']
						"
					></pure-icon>
				</view>
				<text
					class="pure-image__status__text pure-image__status__text--loading"
					v-if="loadingText"
					>{{ loadingText }}</text
				>
			</slot>
		</view>

		<!-- 加载失败 -->
		<view
			class="pure-image__status pure-image__status--error"
			v-else-if="_status === 'error'"
		>
			<slot name="error">
				<view
					class="pure-image__status__icon pure-image__status__icon--error"
				>
					<pure-icon
						:name="errorIconName"
						:mode="
							$attrs.errorIconMode || $attrs['error-icon-mode']
						"
					></pure-icon>
				</view>
				<text
					class="pure-image__status__text pure-image__status__text--error"
					v-if="errorText"
					>{{ errorText }}</text
				>
			</slot>
		</view>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed } from "vue";
import props from "./props";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************
// 加载状态
const _status = ref("loading");

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits(["load", "error"]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];

	// 旋转图标
	if (_props.spin) array.push("pure-image--spin");

	// 加载状态
	array.push(`pure-image--${_status.value}`);

	// 圆形图片
	if (_props.circle) array.push("pure-image--circle");

	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];

	// 宽高
	if (_props.width) array.push(`width: ${_props.width};`);
	if (_props.height) array.push(`height: ${_props.height};`);

	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
// 加载成功事件
function _onLoad(event) {
	// 更新状态
	_status.value = "success";

	// 触发加载成功事件
	_emits("load", event);
}

// 加载失败事件
function _onError(event) {
	// 更新状态
	_status.value = "error";

	// 触发加载失败事件
	_emits("error", event);
}

// 设置状态为加载中，用于demo演示
function _setLoading() {
	_status.value = "loading";
}

// 点击预览
function _handleTap() {
	if (_props.preview) {
		uni.previewImage({
			urls: [_props.src],
		});
	}
}

defineExpose({
	_setLoading,
});
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
